/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {StyleSheet, Text, View, Image, TouchableOpacity, Animated} from 'react-native';
import { screenW } from '../Components/TitleAndContent';

type Props = {};
export default class AddScreen extends Component<Props> {
  constructor(props) {
    super(props);

    this.state = {
      visible: false,
      pay: 1
    };
  }

  componentDidMount() {}

  render() {
    return (
      <View style={styles.container}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingHorizontal: 15,
            width: screenW,
            height: 50
          }}
        >
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <Text>11</Text>
            <Image source={require('./channel.png')} />
          </View>
          <TouchableOpacity
            hitSlop={{ top: 16, left: 16, bottom: 16, right: 16 }}
            onPress={() => {
              this.setState({ pay: 1 });
            }}
          >
            {this.state.pay ? (
              <Image source={require('../imgs/circle_pink.png')} />
            ) : (
              <Image source={require('../imgs/circle_gray.png')} />
            )}
          </TouchableOpacity>
        </View>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingHorizontal: 15,
            width: screenW,
            height: 50
          }}
        >
          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
            <Text>22</Text>
            <Image source={require('./channel.png')} />
          </View>
          <TouchableOpacity
            hitSlop={{ top: 16, left: 16, bottom: 16, right: 16 }}
            onPress={() => {
              this.setState({ pay: 0 });
            }}
          >
            {!this.state.pay ? (
              <Image source={require('../imgs/circle_pink.png')} />
            ) : (
              <Image source={require('../imgs/circle_gray.png')} />
            )}
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  }
});
// this.timer = setInterval(() => {
//     this.setState({ count: this.state.count - 1 });
//     if (this.state.count === -1) {
//         Animated.timing(this.state.bounceValue, {
//             toValue: 0,
//             duration: 500
//         }).start();
//         clearInterval(this.timer);
//         this.timer = null;
//     }
// }, 1000);
